<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>calculator</title>
 
  <style>
  	#main {
  		width:300px;
  		height:450px;
  		border:10px solid #ff9800;
  		position: absolute;
  		border-radius: 50px;
  		background-image: url(../images/pattern3.png);
  		margin: 0 auto;
  		
  	}
  	#show2 {
  		width : 90%;
  		height : 25px;
  		margin-top : 35px;
  		margin-left:6px;
  		border-bottom : 0px;
  		border-top: 5px solid green;
  		border-right: 5px solid green;
  		border-left: 5px solid green;
  		border-top-left-radius: 10px;
  		border-top-right-radius: 10px;
  		position : relative;
  		text-align: right;
  		font-size: 15px;
  	}
  	#show {
  		width : 90%;
  		height : 25px;
  		margin-top : -5px;
  		margin-left:6px;
  		border-top : 0px;
  		border-bottom: 5px solid green;
  		border-right: 5px solid green;
  		border-left: 5px solid green;
  		border-bottom-left-radius: 10px;
  		border-bottom-right-radius: 10px;
  		
  		text-align: right;
  		font-size: 20px;
  	}
  	#button{
  		width:100%;
  		margin-top: 20px;
  	}
  	#line05 {
  		width: 80%;
  		display: inline-block;
  		
  	} 	
  	#bt_s {
  		width: 10%;
  		margin-left: -8px;
  		margin-top: 0px;
  		position: absolute;
 		display: inline-block;
 	}
 	
 	.line { /* 각 열의 Div */  
 		margin-left:5%;
 		width : 95%;
 		margin-bottom: 2px;
 
 	} 	
 	.bt { /* 각 버튼 */
 		width: 50px; 
 		height:50px;
 		border:1px solid black;
 		border-radius: 10px;
 	}
 	.bt_g {
 		border-radius: 10px;
 	}
 	.bt:hover, .bt_g:hover, .bt_s:hover {
 		background-color: yellow;
  		color: orange;
  		font-weight: bold;
  		-webkit-transition: background 1s, -webkit-transform 1s;
  		-moz-transition: background 2s, -moz-transform 1s;
  	}
  	
 	
  </style>
  
   <script>
    var memory = 0;
  	function oper(v){
  		var r2 = document.getElementById("show2");
  		var r = document.getElementById("show");
  		
  		var temp = r2.value + v;
  		r2.value = temp;
  		
  	}
  	
  	function calc(){
  		var r2 = document.getElementById("show2");
  		var r = document.getElementById("show");
  		
  		r.value = eval(r2.value);
  		
  		
  	}
  	function cls(){
  		var r2 = document.getElementById("show2");
  		var r = document.getElementById("show");
  		
  		r.value = "";
  		r2.value = "";
  	}
  	function rute(){
  		var r2 = document.getElementById("show2");
  		var r = document.getElementById("show");
  		
  		var temp = r.value;
  		
  		r2 = "sqrt(" + r.value +")";
  		r2.value = Math.sqrt(r.value);
  		
  	}
  	function mem(v){ // 메모리에 관련된 처리함수
  		var r = document.getElementById("show");
  		switch(v){
  			case "MC":
  			memory = Number(r.value);
  			break;
  			case "MR":
  			r.value = memory;
  			break;
  			case "MS":
  			memory = 0;
  			break;
  			case "M+":
  			memory += Number(r.value);
  			break;
  			case "M-":
  			memory -= Number(r.value);
  			break;
  		}
  	}
  </script>
  
</head>

<body>
	
<div id="main">
	
	<textarea id="show2" readonly="readonly" rows="1" cols="30"> </textarea>
	<textarea id="show" readonly="readonly" rows="1" cols="30"> </textarea>
	<div id="button">
		<div class="line">
			<input class="bt" type="button" value="MC" onclick="mem(this.value)">
			<input class="bt" type="button" value="MR" onclick="mem(this.value)">
			<input class="bt" type="button" value="MS" onclick="mem(this.value)">
			<input class="bt" type="button" value="M+" onclick="mem(this.value)">
			<input class="bt" type="button" value="M-" onclick="mem(this.value)">
		</div>
		<div class="line">
			<input class="bt" type="button" value="←" onclick="oper(this.value)">
			<input class="bt" type="button" value="CE" onclick="cls()">
			<input class="bt" type="button" value="C" onclick="cls()">
			<input class="bt" type="button" value="±" >
			<input class="bt" type="button" value="√" onclick="rute(this.value)">
		</div>
		<div class="line">
			<input class="bt" type="button" value="7" onclick="oper(this.value)">
			<input class="bt" type="button" value="8" onclick="oper(this.value)">
			<input class="bt" type="button" value="9" onclick="oper(this.value)">
			<input class="bt" type="button" value=" / " onclick="oper(this.value)">
			<input class="bt" type="button" value=" % " >
		</div>
		<div class="line">
			<input class="bt" type="button" value="4" onclick="oper(this.value)">
			<input class="bt" type="button" value="5" onclick="oper(this.value)">
			<input class="bt" type="button" value="6" onclick="oper(this.value)">
			<input class="bt" type="button" value=" * " onclick="oper(this.value)">
			<input class="bt" type="button" value="1/x" >
		</div>
		<div class="line">
			<div id="line05">
				<div>
					<input class="bt" type="button" value="1" onclick="oper(this.value)">
					<input class="bt" type="button" value="2" onclick="oper(this.value)">
					<input class="bt" type="button" value="3" onclick="oper(this.value)">
					<input class="bt" type="button" value=" - " onclick="oper(this.value)">
				</div>
				<div style="margin-top: 2px">
					<input class="bt_g" type="button" value="0 " style="width: 104px; height: 50px; border:1px solid black;" onclick="oper(this.value)">
					<input class="bt" type="button" value=" . " >
					<input class="bt" type="button" value=" + " onclick="oper(this.value)">
				</div>
			</div>
			
			<div id="bt_s">
			<input class="bt_g" type="button" value="=" style="width: 50px; height: 102px; border:1px solid black;" onclick="calc()">
			</div>
		</div>
		
	</div>
</div>
</body>
</html>